<template>
    <div>

       <el-header ><h3>{{this.type}}</h3></el-header>

    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <!-- <el-table-column
        prop="name"
        label="服务名称"
        width="170"
        align="center">
      </el-table-column>
      <el-table-column
        prop="introduce"
        label="服务介绍"
        width="170"
        align="center">
      </el-table-column>
      <el-table-column
        prop="supportTime"
        label="服务时间"
        width="170"
        align="center">
      </el-table-column>
            <el-table-column
        prop="price"
        label="价格"
        width="80"
        align="center">
      </el-table-column> -->
      <!-- 图片测试 -->
          <el-table-column
        label="图片详情"
        width="100"
        align="center">
         <template slot-scope="scope">
        <span v-if="scope.row.photo">
          <img width="95" src="../../static/2.jpg">
        </span>

        </template>
      </el-table-column>

        <el-table-column
        prop="serviceMerchant.name"
        label="服务商家"

        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="服务名称"

        align="center">
      </el-table-column>
      <el-table-column
        prop="type"
        label="服务类型"

        align="center">
      </el-table-column>
      <el-table-column
        prop="introduce"
        label="服务介绍"

        align="center">
      </el-table-column>
      <el-table-column
        prop="supportTime"
        label="服务时间"

        align="center">
      </el-table-column>
            <el-table-column
        prop="price"
        label="价格"

        align="center">
      </el-table-column>

      <el-table-column
        label="操作"

        align="center">
        <!-- slot-scope="scope" -->
        <template slot-scope="scope">
          <!-- type里的选项只是颜色 -->
          <!-- 这些方法用于打开对话框，名字要和真正实现的方法，事件名区分 -->
          <el-button type="success" size="mini" @click="info(scope)">查看</el-button><br>
          <el-button type="primary" size="mini" @click="buy(scope)">下单</el-button>


        </template>
      </el-table-column>
    </el-table>


    </div>
</template>

<script>

export default {
    data() {
      return{
           tableData:[],
           id:"",
           cid:"",
           type:"",
           current: {} ,

      }
    },
    methods:{
                      //查看详情
      info:function(scope){
        // scope.$index  获取当前第几个元素被点击了
        // scope.row 获取当前行的数据
        console.log(this.tableData)
        this.current = scope.row
        this.$router.push({
            path:'/Servicedetail',
            // 同级路由传参方式
            query:{

                current:this.current

            }
        })
        // 显示对话框
       // this.dialogVisible = true
      },
        close:function(){
         this.dialogVisible = false
      },
      buy:function(scope){
         // scope.$index  获取当前第几个元素被点击了
        // scope.row 获取当前行的数据
        console.log(scope.row)
        this.current = scope.row
        // console.log("获取的id:"+this.current.id)
        // console.log("获取的cid:"+this.current.cid)
        // console.log("获取的status:"+this.current.status)
        // console.log("获取的price:"+this.current.price)
         this.$router.push({
            path:'/buyservice',
            query:{
                iid:this.current.id,
                cid:this.current.cid,
                mid:this.current.serviceMerchant.id,
                // status:this.current.status,
                price:this.current.price,

            }
        })
      }

    },

        mounted(){
        // 同级路由传参用query
        this.id = this.$route.query.id
        this.cid=window.sessionStorage.getItem("cid")
         console.log("服务类型id:"+this.id)
        this.type=this.$route.query.type
        this.$axios.get("http://localhost:8080/service/findByTypeandCid/"+parseInt(this.id)+"/"+parseInt(this.cid)).then(res =>{
        console.log(res.data)//ResponseResult
        console.log("shuju")
        console.log(res.data.data)
        console.log("传参小区id："+this.cid)
        this.tableData = res.data.data

      })
    }
}
</script>

<style>
  .el-table .warning-row {
      background: oldlace;
    }
  
    .el-table .success-row {
      background: #f0f9eb;
    }
</style>
